/*******************************
            头部区域 
*******************************/
#page-header,
.f-page-header,
.f-pt-header {
  z-index: 2;
}

.f-page-card {
  #page-header,
  .f-page-header,
  .f-pt-header {
    z-index: 105 !important;
  }
}

.#{$f-pt-header-prefix} {
  flex-shrink: 0;
  background: $farris-ptlayout-header-bg;
  box-shadow: $farris-ptlayout-header-shadow;

  // 元素的普通间距
  &-el-mt {
    margin-top: $f-pt-header-common-gutter-y;
  }

  &-el-mb {
    margin-bottom: $f-pt-header-common-gutter-y;
  }

  &-el-my {
    margin-top: $f-pt-header-common-gutter-y;
    margin-bottom: $f-pt-header-common-gutter-y;
  }

  &-el-mx {
    margin-left: $f-pt-header-inner-gutter-x;
    margin-right: $f-pt-header-inner-gutter-x;
  }

  // Header——默认区域
  &-base {
    padding: $farris-ptlayout-header-inner-gutter;
    min-height: $f-pt-header-base-height;
    @include f-header-flex;
    @extend .f-utils-nogutters;

    // 标题区域
    .f-title {
      display: inline-flex;
      align-items: center;

      .f-title {

        // 标题——文字
        &-text {
          font-size: $farris-ptlayout-header-title-font-size;
          line-height: $farris-ptlayout-header-line-height;
          color: $farris-ptlayout-header-title-text;
          @include f-text-overflow;
          margin: 0 $f-pt-header-el-gutter-new 0 0;
        }

        // 标题——图标
        &-icon {
          display: inline-flex;
          width: $f-pt-header-title-icon-size;
          height: $f-pt-header-title-icon-size;
          line-height: $f-pt-header-title-icon-size;
          flex-shrink: 0;
          text-align: center;
          background: $farris-title-icon-bg;
          border-radius: 0.25rem;
          color: $farris-title-icon-color;
          justify-content: center;
          align-items: center;
          flex-shrink: 0;
          overflow: hidden;

          img {
            display: block;
            width: $f-pt-header-title-icon-size;
            height: $f-pt-header-title-icon-size;
          }

          margin: 0 $f-el-header-title-icon-right-gutter 0 0;

          & .f-icon::before {
            vertical-align: bottom;
          }
        }

        // 标题——副标题
        &-subtitle {
          padding: 0 0 0 $f-pt-header-el-gutter-new;
          font-size: $farris-font-size-base;
          @include f-text-overflow;
          border-left: 1px solid $f-neutral-08;
          margin: 0 $f-pt-header-el-gutter-new 0 0;
        }

        // 状态
        &-status {
          margin: 0 $f-pt-header-el-gutter-new 0 0;
        }

        // 翻页区域
        &-pagination {
          margin: 0 $f-pt-header-el-gutter-new 0 0;

          span {
            width: $f-pager-ctr-icon-width;
            height: $f-pager-ctr-icon-height;
            margin: $f-pager-ctr-icon-outer-gutter;
            color: $f-pager-ctr-icon-text;
            line-height: $f-pager-ctr-icon-line-height;
            border-width: $f-pager-ctr-icon-border-width;
            border-style: solid;
            border-color: $f-pager-ctr-icon-border-color;
            border-radius: $f-pager-ctr-icon-border-radius;
            background: $f-pager-ctr-icon-background;
            cursor: pointer;

            &.f-state-disabled {
              cursor: default;
              color: $f-pager-ctr-icon-disable-text;
              border-color: $f-pager-ctr-icon-disable-border-color;
              background: $f-pager-ctr-icon-disable-background;
            }

            &:not(.f-state-disabled):hover {
              color: $f-pager-ctr-icon-hover-text;
              border-color: $f-pager-ctr-icon-hover-border-color;
              background: $f-pager-ctr-icon-hover-background;
            }

            &:last-child {
              margin: 0;
            }
          }
        }
      }
    }

    // 中间区域
    .f-content {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
    }

    // 工具区
    .f-toolbar {
      flex-shrink: 0;
    }

    .f-toolbar-viewchange {
      margin-left: 0.375rem;
    }
  }

  // Header——扩展区域
  &-extend {}
}

// 1906——财务有页面已经应用这个样式——保留
.f-pt-header {
  min-height: $farris-ptlayout-header-height;
  padding: $farris-ptlayout-header-inner-gutter;
  flex-shrink: 0;
  background: $farris-ptlayout-header-bg;
  box-shadow: $farris-ptlayout-header-shadow;
  display: block;

  &-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;

    // 标题区域
    .f-title-ctr {
      display: inline-flex;
      align-items: center;
      @include f-text-overflow;

      .f-title {
        margin: 0 $f-pt-header-el-gutter 0 0;
        @extend .farris-form-title;
      }

      // 副标题区域
      .f-subtitle-ctr {
        margin: 0 $f-pt-header-el-gutter 0 0;
        padding: 0 0 0 $f-pt-header-el-gutter;
        font-size: $farris-font-size-base;
        border-left: 1px solid $f-neutral-08;

        .f-subtitle {
          display: inline-block;
          margin: 0;
          font-size: $farris-font-size-base;
        }
      }
    }
  }
}

// 工具条组件调整
.f-component-responsetoolbar {
  position: relative;

  .f-component-container {
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  .f-component-content {
    display: inline-flex;
    white-space: nowrap;
  }
}

/*
* 不同类型模板对应不同的图标颜色,
* 处理渐变拆分
*/
$f-header-icon-bg: (
  manage: (bg:$f-ornament-03, box-shadow:$f-ornament-03-box-shadow),
  dict: (bg:$f-ornament-05, box-shadow:$f-ornament-05-box-shadow),
  bill: (bg:$f-ornament-02, box-shadow:$f-ornament-02-box-shadow),
  query: (bg:$f-ornament-01, box-shadow:$f-ornament-01-box-shadow)) !default;

@each $f-type,
$f-ornamentDetail in $f-header-icon-bg {
  .f-text-orna-#{$f-type} {
    color: $farris-title-icon-color !important;
    background: map-get($f-ornamentDetail, bg) !important;
    box-shadow: map-get($f-ornamentDetail, box-shadow
    );
}
}

$f-header-icon-text: (
  manage: $f-ornament-03,
  dict: $f-ornament-05,
  bill: $f-ornament-02,
  query: $f-ornament-01) !default;

@each $f-type,
$f-textColor in $f-header-icon-text {
  .f-color-orna-#{$f-type} {
    color: $f-textColor !important;
  }
}